import React from 'react'
import '../assets/css/cate.css'
import { getCate, getGoods } from '../request/api'
import { Link } from 'react-router-dom'
class Cate extends React.Component {
    constructor() {
        super()
        this.state = {
            cateList: [],
            cateList2: [],
            num: 0
        }

    }
    componentDidMount() {
        
        getCate().then(res => {
            
            console.log(res, '响应')
            // console.log(this.cateList);
            if (res.data.code == 200) {
                // console.log(123)
                this.setState({
                    cateList: res.data.list

                })
                
            }
        })
      
        getGoods().then(res => {
            console.log(res, '商品响应成功')
            if (res.data.code === 200) {
                this.setState({
                    cateList2: res.data.list
                })
            }
        })
    }
    changName(index) {
        this.setState({
            num: index
        })


    }
    render() {
        const { cateList, cateList2, num } = this.state
        return (<div>
            <div className='cateTo'>
                <div>＜</div>
                <span className='catename'>分类</span>
            </div>
            <div className='inp'>
                <img className='img' src={require('../assets/img/system-serch.png')} alt="" />
                <input type="text" name="" id="a" />
                <button className='btn'>搜索</button>
            </div>
            <div className='cate-bod'>
                <ul className='cate-left'>
                    {
                        cateList.map((item, index) => {
                            return (
                                <li onClick={() => { this.changName(index) }} className={index === num ? 'activecate' : ''} key={item.id}>{item.catename}</li>
                            )
                        })
                    }
                </ul>
                <div className='cate-right'>
                    <span>热门精选</span>
                    {
                        cateList2.map(item => {
                            return (
                                <div key={item.id} >
                                    <Link to={'/detail'} state={{ id: item.id ,islimit:item.islimit}} className="product-list">
                                        <div className="porduct-img">
                                            <img className='image' src={item.img} alt="" />
                                        </div>
                                        <div className="product-txt">
                                            <span>
                                                <p> <span className='pa'>限时</span>{item.goodsname}</p>
                                                <p>{item.description}</p>
                                            </span>
                                            <div className='cate_top'>
                                                <p><i>￥{item.market_price}</i><i className='catecoler'>￥{item.price}</i></p>
                                                {/* <p>￥{item.market_price}</p> */}
                                                <button className='catebtn'>加入购物车</button>
                                            </div>
                                        </div>
                                    </Link>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>)
    }
}
export default Cate